<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>水滴</title>

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      background-color: #00a8ff;
    }

    #water {
      margin-top: 100px;
      width: 300px;
      height: 300px;
  
      border-radius: 59% 41% 60% 40% / 49% 42% 58% 51%  ;
      box-shadow: inset 10px 20px 30px rgba(0, 0, 0, 0.5),
                        10px 20px 20px rgba(0, 0, 0, 0.3),
                        15px 15px 30px rgba(0, 0, 0, 0.05),
                        inset -10px -10px 15px rgba(255, 255, 255, 0.8);
    animation: action 3s linear infinite alternate;                    
    }

    #water::after{
      content: '';
      width: 20px;
      height: 20px;
      position: absolute;
      top: 240px;
      left: 48%;
      background-color: rgba(255, 255, 255, 0.8);
      border-radius: 30% 70% 35% 65% / 28% 44% 56% 72% ;
    }

    #water::before{
      content: '';
      width: 10px;
      height: 10px;
      position: absolute;
      top: 205px;
      left: 44%;
      background-color: rgba(255, 255, 255, 0.8);
      border-radius: 61% 39% 67% 33% / 28% 44% 56% 72% ;
    }

    @keyframes action{
      25%{
        border-radius: 66% 34% 55% 45% / 49% 46% 54% 51%   ;
      }

      50%{
        border-radius: 61% 39% 50% 50% / 43% 53% 47% 57%  ;
      }

      100%{
        border-radius: 53% 47% 45% 55% / 47% 55% 45% 53%    ;
      }
      
    }
  </style>


</head>

<body>
  <div id="water"></div>

</body>

</html>